<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .bar li{
            list-style: none;
            background: dodgerblue;
            color: #fff;
            margin-bottom: 3px;
            text-align: center;
            font-size: 12px;
            padding: 5px 0px;
        }

        .bar-active {
            background: lightseagreen !important;
        }
    </style>
</head>
<body>
<div style="width: 100%;height:100%;display: flex;flex-direction: row;">
    <div style="width: 200px;height:100%;background: #f0f0f0;display: flex;flex-direction: column">
        <div class="bar" style="display: flex;flex-direction: column;height: 200px;">
            <li class="bar-active">选择模式</li>
            <li>浏览模式</li>
            <li onclick="addBackground()">更换背景</li>
            <li onclick="addText()">添加文字</li>
            <li>删除选中对象</li>
            <li>刷新</li>
        </div>
        <div style="background: lightseagreen" id="objectList">
        </div>
    </div>
    <canvas id="canvas" width="1200" height="800" style="">
        <textarea id="text" oninput="textInput" style="width: 400px;height: 600px;"></textarea>
    </canvas>
    <div style="background: dodgerblue;width: 300px;height:100%;" id="sysList">
        <li onclick="choiseOne(1)">对象1</li>
    </div>
</div>

<div id="tip" style="display: none; position: absolute; top:100px;left: 200px;background: #f0f0f0;padding: 20px;">
    <div style="display: flex;flex-direction: column">
        <div>大小:
            <input id="fontSize" value="">
        </div>
        <div>字体:
            <select id="font">
                <option value="隶书">隶书</option>
                <option value="宋体">宋体</option>
            </select>
        </div>
        <div>
            <button onclick="cancelForm()">取消</button>
            <button onclick="confirmForm()">确定</button>
        </div>
    </div>
</div>
<script src="design.js"></script>
<script>
    var stage = new Stage("canvas", "http://ncwu.jijiaox.com/static/tpl/enroll.jpeg", 600, 400);


    var c=document.getElementById("canvas");
    var ctx=c.getContext("2d");
    var context = ctx;

    var image = new Image(600,400);
    image.src = "http://ncwu.jijiaox.com/static/tpl/enroll.jpeg";
    image.onload = function(){
        console.log("加载");
        c.width= image.width;
        c.height= image.height;
        c.style.width= c.width+"px"
        c.style.height=c.height+"px"

        ctx.drawImage(image,0,0, 600,400);

    }
    image.onerror = function (){
        console.log("加载失败");
    }
    console.log(image)

    c.width= image.width;
    c.height= image.height;
    c.style.width= c.width+"px"
    c.style.height=c.height+"px"

    ctx.drawImage(image,0,0);

    ctx.fillStyle="#FF0000";
    // ctx.fillRect(0,0,150,75);
    console.log(c.style.width, c.style.height)
    ctx.lineWidth=1
    ctx.shadowBlur=0

    ctx.font="30px Verdana";
    // Create gradient
    var gradient=ctx.createLinearGradient(0,0,c.width,0);
    gradient.addColorStop("0","magenta");
    gradient.addColorStop("0.5","blue");
    gradient.addColorStop("1.0","red");
    // Fill with gradient
    ctx.fillStyle=gradient;
    //ctx.fillText("Big smile!",10,90);


    let currentId = 0;
    function choiseOne(id){
        currentId = id;
    }
    function display(id){
        document.getElementById("tip").style.display="block";
        document.getElementById("fontSize").value = 11;
        document.getElementById("font").value = "宋体";
    }
    function confirmForm(){
        document.getElementById("tip").style.display="block";
    }
    function cancelForm(){
        document.getElementById("tip").style.display="none";
    }

    canvas.onmousedown = function(e){
        if(currentId){
            textList.push({
                size:30,
                font:"宋体",
                x:e.clientX-210,
                y:e.clientY,
                value:"你好啊",
                name:"文字对象"+currentId
            })
            drawList()
            updateObject()
        }
        console.log("事件", e)
    }


    let textList = []
    function drawList(){
        textList.forEach((item)=>{
            ctx.font = item.size+"px "+item.font;
            ctx.fillText(item.value, item.x, item.y)
        })
    }
    let sysList = [
        {id:"1", name:"物件1", key:"key1"},
        {id:"2", name:"物件2", key:"key2"},
        {id:"3", name:"物件3", key:"key3"},
        {id:"4", name:"物件4", key:"key4"},
        {id:"5", name:"物件5", key:"key5"},
        {id:"6", name:"物件6", key:"key6"},
        {id:"7", name:"物件7", key:"key7"}
    ]
    function drawSysList(){
        let objectList = document.getElementById("sysList");
        let html = "";
        sysList.forEach((item)=>{
            html += '<li onclick="choiseOne('+item.id+')">'+item.name+'</li>';
        })
        objectList.innerHTML = html;
    }

    //更新对象列表
    function updateObject(){
        let objectList = document.getElementById("objectList");
        let html = "";
        textList.forEach((item)=>{
            html += "<li onclick='display("+item.id+")'>"+item.name+"</li>";
        })
        objectList.innerHTML = html;
    }

    //添加背景图
    function addBackground(){
    }

    //添加文字
    function addText(){
        textList.push({
            size:30,
            font:"宋体",
            x:10,
            y:100,
            value:"你好啊",
            name:"文字对象"
        })
        drawList()
        updateObject()
    }

    //drawSysList()
</script>
</body>
</html>